<template>
    <custom-page-box>
        <p class="module-name">待办事项</p>
        <ul class="type-list">
            <li @click="handleJump('company-examine')">
                <img src="@/assets/images/operate/list01.png" alt="" />
                <div>
                    <p>待审核的企业认证</p>
                    <strong>{{ typeList[0].num || 0 }}</strong><span>条</span>
                </div>
            </li>
            <li @click="handleJump('success-case-audit')">
                <img src="@/assets/images/operate/list02.png" alt="" />
                <div>
                    <p>待审核的案例</p>
                    <strong>{{ typeList[1].num || 0 }}</strong><span>条</span>
                </div>
            </li>
            <li @click="handleJump('service-manage-audit')">
                <img src="@/assets/images/operate/list03.png" alt="" />
                <div>
                    <p>待审核的服务报价</p>
                    <strong>{{ typeList[2].num || 0 }}</strong><span>条</span>
                </div>
            </li>
            <li @click="handleJump('need-manage-audit')">
                <img src="@/assets/images/operate/list04.png" alt="" />
                <div>
                    <p>待审核的需求</p>
                    <strong>{{ typeList[3].num || 0 }}</strong><span>条</span>
                </div>
            </li>
        </ul>
        <p class="module-name">APP线上监测数据(7日内趋势图)</p>
        <div class="chart-box">
            <div class="chart-box-left"></div>
            <div class="chart-box-right"></div>
        </div>
    </custom-page-box>
</template>

<script>
export default {
    data () {
        return {
            typeList: [
                {
                    num: 0
                },
                {
                    num: 0
                },
                {
                    num: 0
                },
                {
                    num: 0
                }
            ]
        }
    },
    mounted () {
        this.getToDoWork()
        this.getTownServiceNum()
        this.getTownDemandNum()
    },
    methods: {
        // 获取待办事项数量
        async getToDoWork () {
            const res = await this.$ApiServer['operate/getToDoWork']()
            if (res.code === 200) {
                this.typeList = res.data
            }
        },
        // 获取乡村服务展示数量
        async getTownServiceNum () {
            const res = await this.$ApiServer['operate/getTownServiceNum']()
            if (res.code === 200) {
                this.initService(res.data)
            }
        },
        initService (data) {
            const leftDom = this.$echarts.init(document.querySelector('.chart-box-left'))
            leftDom.setOption({
                color: ['#009944', '#F3993C', '#1943DD'],
                grid: {
                    x: 40,
                    y: 120,
                    x2: 30,
                    y2: 60
                },
                title: {
                    left: 20,
                    top: 40,
                    text: `{a|乡村服务展示数量}  {b|${data.sum}}  {c| }`,
                    textStyle: {
                        fontSize: 14,
                        fontFamily: 'PingFang SC',
                        color: '#5C6075',
                        rich: {
                            b: {
                                fontSize: 14,
                                fontFamily: 'PingFang SC',
                                color: '#2a2a2a'
                            },
                            c: {
                                width: 12,
                                height: 9,
                                backgroundColor: {
                                    image:
                                        data.uptrend > 0
                                            ? require('@/assets/images/operate/left-icon-2.png')
                                            : data.uptrend === 0
                                                ? require('@/assets/images/operate/left-icon-0.png')
                                                : require('@/assets/images/operate/left-icon-1.png')
                                }
                            }
                        }
                    },
                    subtext: '{a| }',
                    subtextStyle: {
                        rich: {
                            a: {
                                width: 114,
                                height: 6,
                                backgroundColor: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#FFFFFF'
                                    },
                                    {
                                        offset: 1,
                                        color: '#009944'
                                    }
                                ])
                            }
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    right: 30,
                    top: 40,
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 25,
                    data: [
                        { name: '服务商', icon: 'circle' },
                        { name: '服务报价', icon: 'circle' },
                        { name: '案例', icon: 'circle' }
                    ]
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: data.dateList
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '服务商',
                        type: 'bar',
                        data: data.firstCase,
                        itemStyle: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: '#FBD4AC'
                                },
                                {
                                    offset: 1,
                                    color: '#F3993C'
                                }
                            ])
                        }
                    },
                    {
                        name: '服务报价',
                        type: 'bar',
                        data: data.secondCase,
                        itemStyle: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: '#64E99F'
                                },
                                {
                                    offset: 1,
                                    color: '#009944'
                                }
                            ])
                        }
                    },
                    {
                        name: '案例',
                        type: 'bar',
                        data: data.thirdCase,
                        itemStyle: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#CAD4F9' },
                                { offset: 1, color: '#1943DD' }
                            ])
                        }
                    }
                ]
            })
        },

        // 获取商机展示数量
        async getTownDemandNum () {
            const res = await this.$ApiServer['operate/getTownDemandNum']()
            if (res.code === 200) {
                this.initTownDemand(res.data)
            }
        },
        initTownDemand (data) {
            const leftDom = this.$echarts.init(document.querySelector('.chart-box-right'))
            leftDom.setOption({
                color: ['#1943DD', '#F3993C', '#009944'],
                grid: {
                    x: 40,
                    y: 120,
                    x2: 30,
                    y2: 60
                },
                title: {
                    left: 20,
                    top: 40,
                    text: `{a|乡村商机展示数量}  {b|${data.sum}}  {c| }`,
                    textStyle: {
                        fontSize: 14,
                        fontFamily: 'PingFang SC',
                        color: '#5C6075',
                        rich: {
                            b: {
                                fontSize: 14,
                                fontFamily: 'PingFang SC',
                                color: '#2A2A2A'
                            },
                            c: {
                                width: 12,
                                height: 9,
                                backgroundColor: {
                                    image:
                                        data.uptrend > 0
                                            ? require('@/assets/images/operate/left-icon-2.png')
                                            : data.uptrend === 0
                                                ? require('@/assets/images/operate/left-icon-0.png')
                                                : require('@/assets/images/operate/left-icon-1.png')
                                }
                            }
                        }
                    },
                    subtext: '{a| }',
                    subtextStyle: {
                        rich: {
                            a: {
                                width: 114,
                                height: 6,
                                backgroundColor: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#FFFFFF'
                                    },
                                    {
                                        offset: 1,
                                        color: '#009944'
                                    }
                                ])
                            }
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    right: 30,
                    top: 40,
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 25,
                    data: [
                        { name: '乡村招商引资', icon: 'circle' },
                        { name: '乡村服务需求', icon: 'circle' },
                        { name: '企业需求', icon: 'circle' }
                    ]
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: data.dateList
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '乡村招商引资',
                        type: 'line',
                        data: data.firstCase
                    },
                    {
                        name: '乡村服务需求',
                        type: 'line',
                        data: data.secondCase
                    },
                    {
                        name: '企业需求',
                        type: 'line',
                        data: data.thirdCase
                    }
                ]
            })
        },

        handleJump (str) {
            this.$router.push({
                name: str
            })
        }
    }
}
</script>

<style lang="less" scoped>
.module-name {
    font-size: 16px;
    color: #2a2a2a;
}
.type-list {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
    li {
        width: calc((100% - 63px) / 4);
        height: 188px;
        background: #fff;
        border-radius: 6px;
        margin-top: 10px;
        display: flex;
        align-items: center;
        padding-left: 30px;
        cursor: pointer;
        &:hover {
            box-shadow: 6px 6px 6px #cbcbce;
        }
        img {
            width: 125px;
            height: 125px;
        }
        div {
            height: 125px;
            p {
                font-size: 16px;
                color: #666666;
                margin-top: 20px;
            }
            strong {
                font-size: 40px;
                color: #2a2a2a;
            }
            span {
                font-size: 16px;
                color: #2a2a2a;
            }
        }
    }
}
.chart-box {
    width: 100%;
    height: calc(100% - 268px);
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    & > div {
        width: calc(50% - 5px);
        height: 100%;
        background: #fff;
        border-radius: 6px;
    }
}
</style>
